<template>
	<div class="app-container home">
		<el-row :gutter="20">
			<el-col :span="8">
				<el-row>
					<el-card class="update-log">
					<div class="user-info">
						<el-avatar :size="100" :src="avatar" />
						<div class="user-info-cont">
							<div class="user-info-name">{{ userInfo.nickName }}</div>
							<div v-if="userInfo.dept">{{userInfo.dept.deptName}}</div>
						</div>
					</div>
					 <el-divider />
					<div class="user-info-list">
						上次登录时间：
						<span>{{formatDate(userInfo.loginDate)}}</span>
					</div>
					<div class="user-info-list">
						上次登录地点：
						<span>云南</span>
					</div>
				</el-card>
				</el-row>
				<el-row>
					<el-card>
					<div slot="header" >
						<span>快捷导航</span>
					</div>
					<div class="nav-cont">
						<el-tag>我的待办</el-tag>
						<el-tag type="success">我的已办</el-tag>
						<el-tag type="info">公司发文</el-tag>
						<el-tag type="warning">个人中心</el-tag>
						<el-tag type="danger">我的发起</el-tag>
						<el-tag>我的待办</el-tag>
						<el-tag type="success">我的已办</el-tag>
						<el-tag type="info">公司发文</el-tag>
						<el-tag type="warning">个人中心</el-tag>
						<el-tag type="danger">我的发起</el-tag>
					</div>
				</el-card>
				</el-row>
				<el-row >
					<el-card :body-style="{ padding: '0px' }">
						<el-calendar 
						></el-calendar>
					</el-card>
				</el-row>
			</el-col>
			<el-col :span="16">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-card  :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<i class="el-icon-user-solid grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">1234</div>
									<div>代办数量</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card  :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-2">
								<i class="el-icon-message-solid grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">321</div>
									<div>已办数量</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card  :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-3">
								<i class="el-icon-s-goods grid-con-icon"></i>
								<div class="grid-cont-right">
									<div class="grid-num">5000</div>
									<div>发起数量</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				
				<el-row >
					<el-card :body-style="{padding: '0px'}">
						<div slot="header" >
							<span>任务面板</span>
						</div>
						<div  class="task-cont">
							<div>
									<div class="task-img">
										<el-image size="large" src="/images/icon-manage-17.png" />
									</div>
									<div style="float:left;width:60%;margin-top: 10px;">
										<a style="margin-left:10px;margin-top:-10px;color:black;font-size:14px;">我的待办</a>
										<div style="margin-left:10px;font-size:12px;font-weight:300;">待处理消息记录</div>
									</div>
							</div>
							<div>
									<div class="task-img">
										<el-image size="large" src="/images/icon-manage-19.png" />
									</div>
									<div style="float:left;width:60%;margin-top: 10px;">
										<a style="margin-left:10px;margin-top:-10px;color:black;font-size:14px;">我的已办</a>
										<div style="margin-left:10px;font-size:12px;font-weight:300;">已处理消息记录</div>
									</div>
							</div>
							<div>
									<div class="task-img">
										<el-image size="large" src="/images/icon-manage-25.png" />
									</div>
									<div style="float:left;width:60%;margin-top: 10px;">
										<a style="margin-left:10px;margin-top:-10px;color:black;font-size:14px;">我的待阅</a>
										<div style="margin-left:10px;font-size:12px;font-weight:300;">待阅消息记录</div>
									</div>
							</div>
							<div>
									<div class="task-img">
										<el-image size="large" src="/images/icon-manage-06.png" />
									</div>
									<div style="float:left;width:60%;margin-top: 10px;">
										<a style="margin-left:10px;margin-top:-10px;color:black;font-size:14px;">我的草稿</a>
										<div style="margin-left:10px;font-size:12px;font-weight:300;">草稿消息记录</div>
									</div>
							</div>
						</div>
					</el-card>
				</el-row>
				<el-row>
					<el-card :body-style="{height:'460px'}">
						<div slot="header" >
							<span>日常应用</span>
						</div>
						<div>
						<el-tabs value="news" >
						    <el-tab-pane label="公司新闻" name="news">
								<div class="block">
								    <el-carousel height="150px">
								      <el-carousel-item v-for="item in 4" :key="item">
								        <h3 class="small">{{ item }}</h3>
								      </el-carousel-item>
								    </el-carousel>
								  </div>
								<div>
									<el-table :data="newsData" style="width: 100%;height: 500px;">
								        <el-table-column prop="newTitle" label="标题" width="545"
										 :show-overflow-tooltip="true" >
											<template
											 slot-scope="scope">
											<el-link type="primary">{{scope.row.newTitle}}</el-link>
											</template>
									</el-table-column>
									<el-table-column prop="newTime" label="发布时间" width="180">
									</el-table-column>
									<el-table-column width="180" prop="newAuth" label="作者">
									</el-table-column>
									</el-table>
								</div>
							</el-tab-pane>
						    <el-tab-pane label="公司公告" name="notice">公司公告</el-tab-pane>
						    <el-tab-pane label="查询" name="search">角色管理</el-tab-pane>
						    <el-tab-pane label="其他" name="other">定时任务补偿</el-tab-pane>
						  </el-tabs>
						</div>
					</el-card>
					
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {getInfo} from '@/api/login.js';
	export default {
		name: "index",
		data() {
			return {
				// 版本号
				version: "3.4.0",
				newsData:[
					{newTitle:'关于云南公司综合部的说明',newTime:'2021年4月30日15:42:46',newAuth:'冯大大'},
					{newTitle:'关于曲靖公司市场部的说明',newTime:'2021年4月30日15:42:46',newAuth:'冯大大'},
					{newTitle:'关于丽江公司综合部的说明',newTime:'2021年4月30日15:42:46',newAuth:'冯大大'},
					{newTitle:'关于大理公司综合部的说明',newTime:'2021年4月30日15:42:46',newAuth:'冯大大'},
				],
				userInfo:{},
				avatar:this.$store.getters.avatar
				
			};
		},
		methods: {
			goTarget(href) {
				window.open(href, "_blank");
			},
			initUserInfo(){
				getInfo().then(response=>{
					this.userInfo=response.user;
				})
			}
		},
		created() {
			this.initUserInfo()
		},
		
	};
</script>

<style scoped lang="scss">
	.home {
		blockquote {
			padding: 10px 20px;
			margin: 0 0 20px;
			font-size: 17.5px;
			border-left: 5px solid #eee;
		}

		hr {
			margin-top: 20px;
			margin-bottom: 20px;
			border: 0;
			border-top: 1px solid #eee;
		}

		.col-item {
			margin-bottom: 20px;
		}


		font-family: "open sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
		color: #676a6c;
		overflow-x: hidden;

		.grid-content {
		    display: flex;
		    align-items: center;
		    height: 100px;
		}
		.grid-cont-right {
		    flex: 1;
		    text-align: center;
		    font-size: 14px;
		    color: #999;
		}
		.grid-num {
		    font-size: 30px;
		    font-weight: bold;
		}
		.grid-con-icon {
		    font-size: 50px;
		    width: 100px;
		    height: 100px;
		    text-align: center;
		    line-height: 100px;
		    color: #fff;
		}
		.grid-con-1 .grid-con-icon {
		    background: rgb(45, 140, 240);
		}
		.grid-con-1 .grid-num {
		    color: rgb(45, 140, 240);
		}
		.grid-con-2 .grid-con-icon {
		    background: rgb(100, 213, 114);
		}
		.grid-con-2 .grid-num {
		    color: rgb(45, 140, 240);
		}
		.grid-con-3 .grid-con-icon {
		    background: rgb(242, 94, 67);
		}
		.grid-con-3 .grid-num {
		    color: rgb(242, 94, 67);
		}
		.user-info {
			display: flex;
			align-items: center;
		}
		.user-info-cont {
			padding-left: 60px;
			flex: 1;
			font-size: 14px;
			color: #999;
			
		}
		.user-info-list {
		    font-size: 14px;
		    color: #999;
		    line-height: 25px;
			span {
				margin-left: 30px;
			}
		}
		.user-info-name{
			font-size: 30px;
			color: #222;
		}
		.update-log {
			ol {
				display: block;
				list-style-type: decimal;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0;
				margin-inline-end: 0;
				padding-inline-start: 40px;
			}
		}
		
		.el-row {
		    margin-bottom: 20px;
		    &:last-child {
		      margin-bottom: 0;
		    }
		  }
		 .nav-cont{
			 display: flex;
			 justify-content: space-between;
			 flex-wrap: wrap;
			 align-items:flex-start;
			 grid-template-columns: repeat(3, 1fr);
			     grid-gap: .5rem;
			 span{
				 margin-bottom: 10px;
			 }
		 }
		 .task-cont{
			display: flex; 
			justify-content: space-between;
			>div {
				border-right: 2px solid #e6ebf5; 
				padding: 5px;
			}
			>div:hover {
				cursor:pointer;
				box-shadow: 0 8px 12px 0 rgba(0,0,0,0.24), 0 7px 10px 0 rgba(0,0,0,0.19);
			}
		 }
		 .task-img{
			float:left;
			width:30%;
			margin-left: 10px;
		 }
	}
</style>
<style>
	.el-calendar-table .el-calendar-day {
		height: 30px!important;
	}
	 .el-carousel__item h3 {
	    color: #475669;
	    font-size: 14px;
	    opacity: 0.75;
	    line-height: 150px;
	    margin: 0;
	  }
	
	  .el-carousel__item:nth-child(2n) {
	     background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	     background-color: #d3dce6;
	  }
</style>